<template>
  <div class="addExpense">
    <el-form ref="form" :model="form" :rules="roleCodeRule" label-width="120px">
      <el-row>
        <mainTilte title="商品信息" />
      </el-row>
      <el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="系统sku">
              <el-input v-model.trim="examineForm.code" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="中文名称">
              <el-input v-model.trim="examineForm.name_ch" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="英文名称">
              <el-input v-model="examineForm.name_en" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="form-item-border" />
        <template v-if="examineList.length">
          <div v-for="(item,index) in examineList" :key="index">
            <el-row>
              <form-item :form="item" />
            </el-row>
            <div v-if="index!==(examineList.length-1)" class="form-item-border" />
          </div>
        </template>
        <template v-else>
          <form-item :form="examineForm" />
        </template>
      </el-row>
      <el-row>
        <mainTilte title="价格信息" />
      </el-row>
      <el-row>
        <!-- <el-col :span="8">
          <el-form-item label="采购价(RMB)">
            <el-input :value="examineForm.purchase_price_rmb | toThousandFilter" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="采购价(USD)">
            <el-input :value="examineForm.purchase_price_usd | toThousandFilter" disabled />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="采购基准价(USD)">
            <el-input :value="examineForm.purchase_benchmark_price | toThousandFilter" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="海运费">
            <el-input :value="examineForm.ocean_freight | toThousandFilter" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关税税率">
            <el-input v-model.trim="examineForm.tariff_rate" disabled>
              <template slot="append">
                %
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关税杂费税率">
            <el-input v-model.trim="examineForm.tariff_rate_extras" disabled>
              <template slot="append">
                %
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="额外税税率">
            <el-input v-model.trim="examineForm.additional_tax_rate" disabled>
              <template slot="append">
                %
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="原关税">
            <el-input :value="examineForm.original_tariff | toThousandFilter" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="额外增加关税">
            <el-input :value="examineForm.additional_tariff_increase | toThousandFilter" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总关税">
            <el-input :value="examineForm.all_tariff | toThousandFilter" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单操作费">
            <el-input :value="examineForm.order_operation_fee | toThousandFilter" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="仓储费">
            <el-input :value="examineForm.storage_fee | toThousandFilter" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="快递费">
            <el-input :value="examineForm.express_fee | toThousandFilter" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合计">
            <el-input :value="examineForm.total | toThousandFilter" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="基准价系数">
            <el-input v-model.trim="examineForm.benchmark_price_coefficient" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="基准价">
            <el-input :value="examineForm.benchmark_price | toThousandFilter" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="dialog-footer-center">
        <span>
          <el-button type="primary" @click="$router.go(-1)">返回</el-button>
        </span>
      </div>
    </el-form>
  </div>
</template>

<script>
import formItem from './components/form.vue'
export default {
  components: {
    formItem
  },
  data() {
    return {
      loading: false,
      examineForm: {},
      examineList: [],
      roleCodeRule: {},
      form: {}
    }
  },
  mounted() {
    if (this.$route.query && this.$route.query.row) {
      this.form = JSON.parse(this.$route.query.row)
      console.log(this.form, 'this.form>>>>>')
      this.getProductDetails(this.form.product_id)
    }
  },
  methods: {
    async getProductDetails(id) {
      await this.$http
        .get(`/product/${id}`)
        .then((res) => {
          if (res.code == 10000) {
            this.examineForm = Object.assign(this.form, res.data.packData)
            if (res.data.packing_method === 2) {
              this.examineList = res.data.groupData.map(v => v)
              console.log(this.examineList)
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
.addExpense {
  padding: 15px;
  background: #fff;
}
/deep/.el-select,
.el-autocomplete {
  width: 100%;
}
.sizeStyle {
  display: flex;
}
.sizeStyle /deep/ .el-input__inner {
  border-right: 0;
}
.sizeStyle /deep/ .el-input-group__append {
  padding-left: 4px;
  padding-right: 4px;
  font-size: 14px;
  color: #333333;
  background: #fff;
}
.form-item-border{
  border-top: 1px solid rgba(0,0,0,.1);
  padding-top:20px ;
}
</style>
